<template>
  <view class="w">
    <view class="ti">
      访客开门记录
    </view>
    <template v-for="k in visitorList" :key="k.id" >
      <Card  v-if="k.status == 1" :title="k.name">
      <template v-slot:fu-title>
        <text v-if="k.status == 1" style="color: rgb(40, 189, 158);">关闭授权</text>
        <text v-if="k.status == 0" style="color: reg(123,123,123);">已失效</text>
      </template>
      <template v-slot:main>
				<view class="content">
					<view class="content-item">
						<view class="item-left">
							授权时间
						</view>
						<view class="item-right">
							{{ k.time }}
						</view>
					</view>
					<view class="content-item">
						<view class="item-left">
							授权通道
						</view>
						<view class="item-right">
							{{ k.tongdao }}
						</view>
					</view>
					<view class="content-item">
						<view class="item-left">
							有效时长
						</view>
						<view class="item-right">
							{{ k.often }}
						</view>
					</view>
				</view>
			</template>
      <template v-slot:floot-right>
        <view v-if="k.status ==1" style="color: rgb(17, 142, 233);">分享
          <image
          style="width:30rpx;height:30rpx"
          src="/static/icons/分享.png"
          mode="scaleToFill"
        />
        </view>
     
      </template>
    </Card>
    </template>
    <template v-for="k in visitorList" :key="k.id" >
      <Card  v-if="k.status == 0" :title="k.name">
      <template v-slot:fu-title>
        <text v-if="k.status == 1" style="color: rgb(40, 189, 158);">关闭授权</text>
        <text v-if="k.status == 0" style="color: reg(123,123,123);">已失效</text>
      </template>
      <template v-slot:main>
				<view class="content">
					<view class="content-item">
						<view class="item-left">
							授权时间
						</view>
						<view class="item-right">
							{{ k.time }}
						</view>
					</view>
					<view class="content-item">
						<view class="item-left">
							授权通道
						</view>
						<view class="item-right">
							{{ k.tongdao }}
						</view>
					</view>
					<view class="content-item">
						<view class="item-left">
							有效时长
						</view>
						<view class="item-right">
							{{ k.often }}
						</view>
					</view>
				</view>
			</template>
      <template v-slot:floot-right>
        <view v-if="k.status ==1" style="color: rgb(17, 142, 233);">分享
          <image
          style="width:30rpx;height:30rpx"
          src="/static/icons/分享.png"
          mode="scaleToFill"
        />
        </view>
     
      </template>
    </Card>
    </template>
    
  
  </view>

</template>

<script setup>
import Card from '/components/card-2.0.vue'
import {ref} from 'vue'
let visitorList = ref([
  {
    id:1,
    name:"瑞辰国际",
    time:"2023-03-15 15:30:00",
    tongdao:"北侧入口闸机、1栋1单元门",
    // 0 已失效 1 已授权
    status:0,
    often:"3小时",
  },
  {
    id:2,
    name:"大夏国际",
    time:"2023-03-15 15:30:00",
    tongdao:"南侧入口闸机、1栋1单元门",
    // 0 已失效 1 已授权
    status:1,
    often:"12小时",
  },
  {
    id:3,
    name:"瑞辰国际",
    time:"2023-03-15 15:30:00",
    tongdao:"南侧入口闸机、1栋1单元门",
    // 0 已失效 1 已授权
    status:0,
    often:"3小时",
  },
  {
    id:4,
    name:"花苑小区",
    time:"2023-03-15 15:30:00",
    tongdao:"南侧入口闸机、1栋1单元门",
    // 0 已失效 1 已授权
    status:0,
    often:"6小时",
  },
  {
    id:5,
    name:"瑞辰国际",
    time:"2023-03-15 15:20:00",
    tongdao:"南侧入口闸机、1栋1单元门",
    // 0 已失效 1 已授权
    status:0,
    often:"3小时",
  },
])
</script>

<style lang="scss" scoped>
.w{
  background-color: rgb(245, 245, 245);
  height: calc(100vh - 91rpx);
  overflow: auto;

  .ti{
    margin: 10rpx;
    font-size: 26rpx;
    padding: 20rpx;
    color: rgb(123,123,123);
    text-align: end;
  }
}
.card{
  image{
    width: 35rpx;
    height: 35rpx;
    vertical-align: middle;
  }
  .tou{
    margin-right: 20rpx;
    width: 30rpx;
    height: 30rpx;
    vertical-align: middle;
  }
  .content{
		.content-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
      margin-bottom: 20rpx;
			.item-right{
				color: #000;
			}
		}
	}
}

</style>